<template>
  <div class="content">
    <div class="main">
      <questionsCheckFilterVue @done="getChoiceFilter"></questionsCheckFilterVue>
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all">
          <questionsChoiceTableVue @on="getChoice" :choiceData="choiceData"></questionsChoiceTableVue>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="stay">
          <questionsChoiceTableVue @on="getChoice" :choiceData="choiceData"></questionsChoiceTableVue>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="audited">
          <questionsChoiceTableVue @on="getChoice" :choiceData="choiceData"></questionsChoiceTableVue>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="refuse">
          <questionsChoiceTableVue @on="getChoice" :choiceData="choiceData"></questionsChoiceTableVue>
        </el-tab-pane>
      </el-tabs>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :total="choiceData.counts" layout="prev, pager, next, sizes, jumper" :page-sizes="[5, 10, 20, 50]"  :page-size="pageData.pagesize">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import questionsCheckFilterVue from '@/module-hmmm/components/questions-check-filter.vue'
import { choice } from '@/api/hmmm/questions'
import questionsChoiceTableVue from '../components/questions-choice-table.vue'
export default {
  components: {
    questionsChoiceTableVue,
    questionsCheckFilterVue
  },
  data () {
    return {
      activeName: 'all',
      choiceData: {},
      currentPage4: 1,
      pageData: {
        page: 1,
        pagesize: 5
      }
    }
  },
  // 创建后获取数据
  created () {
    this.getChoice()
  },
  methods: {
  // 初始化数据
    getChoice () {
      choice(this.pageData).then(res => {
        this.choiceData = res.data
        // console.log(this.choiceData)
      })
    },

    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pageData.pagesize = val
      this.getChoice()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.pageData.page = val
      this.getChoice()
    },
    getChoiceFilter (val) {
      choice(val).then(res => {
        this.choiceData = res.data
      })
    },
    handleClick (val) {
      if (val._props.name === 'stay') {
        this.pageData.chkState = 0
        this.getChoice()
      } else if (val._props.name === 'audited') {
        this.pageData.chkState = 1
        this.getChoice()
      } else if (val._props.name === 'refuse') {
        this.pageData.chkState = 2
        this.getChoice()
      } else if (val._props.name === 'all') {
        delete this.pageData.chkState
        this.getChoice()
      }
    }

  }
}
</script>

<style scoped>
.content {
  padding: 0 10px;
  margin: 10px 0;
}

.main {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
  border-radius: 5px;
  color: #303133;
}
.block {
  margin-top: 20px;
  text-align: right;
}
::v-deep .el-pagination__jump {
  margin-left: 0;
}
</style>
